<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validate_Form_VS3.aspx.cs" Inherits="Validate_Form_VS3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<html>

<!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  

	Enjoy!
-->

<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/>

</head>

<body>


<form id="myform">

   <fieldset>
      <h3>Sample registration form</h3>

      
      <p> Enter bad values and then press the submit button. </p>
      
      <p>
         <label>email *</label>
         <input type="email" name="email" required="required" />
      </p>
      <p>
         <label>website *</label>

         <input type="url" name="url" required="required" />
      </p>
      <p>
         <label>name *</label>
         <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
      </p>
      <p>
         <label>age</label>

         <input type="number" name="age" size="4" min="5" max="50" />
      </p>
      
      <p id="terms">
      	<label>I accept the terms</label>
      	<input type="checkbox" required="required" />   
		</p>
      
      <button type="submit">Submit form</button>
      <button type="reset">Reset</button>

   </fieldset>

</form>


<script>

// initialize validator and add a custom form submission logic
$("#myform").validator().submit(function(e) {

	var form = $(this);

	// client-side validation OK.
	if (!e.isDefaultPrevented()) {

		// submit with AJAX
		$.getJSON("server-fail.js?" + form.serialize(), function(json) {

			// everything is ok. (server returned true)
			if (json === true)  {
				form.load("success.php");

			// server-side validation failed. use invalidate() to show errors
			} else {
				form.data("validator").invalidate(json);
			}
		});

		// prevent default form submission logic
		e.preventDefault();
	}
});
</script>
</body>

</html>

